<!DOCTYPE html>
<html lang="zh-CN">
<head> 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>群裂变</title>

      {$h->import('static/layui/layui.css')}
      {$h->import('static/css/mission.css')}
      {$h->import('static/css/common.css')}
      {$h->import('static/css/iconfont.css')}
      {$h->import('static/js/ajax.js')}
      {$h->import('static/layui/layui.js')}
      {$h->import('static/js/ajax.js')}
      {$h->import('static/layui/lay/modules/colorpicker.js')}
      {$h->import('static/layui/lay/modules/upload.js')}
      {$h->import('static/layui/lay/modules/laydate.js')}
      {$h->import('static/js/jquery.min.js')}
     <script src="/unpkg/unpkg.vue.js"></script>
     <style type="text/css"> 
     #draggable{
          position: absolute;
          top: {if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_top']}{else}338{/if}px;
          left: {if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_left']}{else}162{/if}px;
          cursor: pointer;
     }
    
     #draggable .draggables img{
          -webkit-user-drag: none;
          -moz-user-drag: none;
          -ms-user-drag: none; 
          -o-user-drag: none;
     }
     .poster-userinfo{
           width: 110px; 
           cursor: pointer;
           position: absolute;
           top: {if $topss}{$topss}{else}0{/if}px;    
           left: {if $leftss}{$leftss}{else}0{/if}px;
     }
     .draggables{
           position: absolute;
           top: {if $topss}{$topss}{else}4{/if}px;
           left: {if $leftss}{$leftss}{else}30{/if}px;
           cursor: pointer;
     }
     #headImg{
           width: 25px;
           height: 25px;
           position: absolute;
           top: {if $topsss}{$topsss}{else}0{/if}px;
           left: {if $leftsss}{$leftsss}{else}0{/if}px;
          cursor: pointer;
     }
     #headImg img{
           width: 25px;
           height: 25px;
           display: block;
           border-right: 50%;
     }
     /* newLei */
     .boxList {
          position: relative;
          left: 710px;
          top: 0px;
     }

     .el-tabs {
          margin-top: -60px;
     }
     /* tab 长度 */
     .el-tabs--card>.el-tabs__header {
          width: 700px;
     }

     .el-input__inner {
          width: 280px;
          height: 28px;
          padding: 0px 8px;
     }

     .botTon {
          width: 98px;
          height: 40px;
          background: rgb(64, 158, 255);
          border: 0px solid white;
          border-radius: 4px;
          margin-left: 11px;
          outline: 0;
          color: white;
          cursor: pointer;
          margin-left: 64px;
     }

     /* 二维码 */
     .el-upload--picture-card {
          margin: 20px 64px;
     }
     .layui-form-radio {
          line-height: 28px;
          margin: 0px -17px 0 0;
          padding-right: 10px;
          cursor: pointer;
          font-size: 0;
     }
     .el-radio__inner{
          position: relative;
          left: 18px;
          top: 3px;
     }
     .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
     }
     .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
     }
     .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
     }
     .avatar {
          width: 178px;
          height: 178px;
          display: block;
     }
     .avatar-uploader-icon{
          width: 120px;
          height: 120px;
          line-height: 120px;
     }
     .el-upload img{
          width: 120px;
          height: 120px;
     }
     .otherInput_container{
          display: flex;
          align-items: center;
          overflow: hidden;
     }
     .otherInput_container span{
          height: 36px;
          line-height: 36px;
          border: 1px solid #e6e6e6;
          padding: 0 10px;
          background: #eee;
          color: #afafaf;
     }
     .otherInput_container span:first-child{
          border-right: none;
     }
     .otherInput_container span:last-child{
          border-left: none;
     }

     .public_form_List{
          margin-bottom: 10px;
     }
     .public_form_List:last-child{
          margin-bottom: 0px;
     }
     .layui-form-radio {
          margin: 0px 5px 0 0;
     }
     /*设置连接样式*/
     .link-card {
         width: 211px;
         height: 60px;
         background: #fff;
         border: 1px solid #f0f0f0;
         padding: 13px;
         margin-left: 16px;
         margin-top: 16px;
         margin-bottom: 10px;
     }
     .title {
         font-size: 14px;
         line-height: 16px;
         color: #000;
         opacity: .85;
         overflow: hidden;
         text-overflow: ellipsis;
     }
     .flex-s-b-c {
         display: -webkit-box;
         display: flex;
         -webkit-box-pack: justify;
         justify-content: space-between;
         -webkit-box-align: center;
         align-items: center;
     }
     .desc {
         height: 47px;
         overflow: hidden;
         text-overflow: ellipsis;
         font-size: 13px;
         color: rgba(0,0,0,.45);
         padding-right: 9px;
     }
     .cover-img {
         width: 40px;
         height: 40px;
     }
     .setting-tip {
          margin-left: 30px;
         display: -webkit-box;
         display: flex;
         -webkit-box-pack: justify;
         justify-content: space-between;
         width: 775px;
         background: #fff7f0;
         border-radius: 2px;
         padding: 15px 14px;
     }
     .text-content>span {
         display: block;
         color: #bb5223;
         font-size: 13px;
     }
     .welcome-tip {
          width: 70%;
          margin-left: 30px;
          display: -webkit-box;
          display: flex;
          -webkit-box-pack: start;
          justify-content: flex-start;
          background: #f7fcff;
          border-radius: 3px;
          border: 1px solid #acd7ff;
          padding: 16px 18px;
     }
     .welcome-tip>.text-content>span {
         display: block;
         color: rgba(0,0,0,.65);
         font-size: 12px;
         line-height: 22px;
     }
     #group_qrcode{
          margin-top: 20px;
     }
     .notify-info {
         width: 650px;
         display: inline-block;
         padding: 12px 5px;
         font-size: 13px;
         color: #bb5223;
         background: #fff7f0;
         border-radius: 3px;
     }
  </style>
</head>
<body>
<form id="form1">
     <div id="app">
          <div style="padding: 36px 20px;" class="public-container">
               <div style="width: 68%;min-width: 634px" class="flex align-items-center">
                    <div class="step-item" :class="{ active: currentStep > 0}">
                         <span class="step-num">1</span>
                         <span>活动基本信息</span>
                    </div>
                    <div class="flex-1 step-separator"></div>
                    <div class="step-item" :class="{ active: currentStep > 1}">
                         <span class="step-num">2</span>
                         <span>设置活动海报</span>
                    </div>
                    <div class="flex-1 step-separator"></div>
                    <div class="step-item" :class="{ active: currentStep > 2}">
                         <span class="step-num">3</span>
                         <span>群聊和欢迎语素材设置</span>
                    </div>
                    {if !$qyFission->id}
                    <div class="flex-1 step-separator"></div>
                    <div class="step-item" :class="{ active: currentStep > 3}">
                         <span class="step-num">4</span>
                         <span>邀请客户参与</span>
                    </div>
                    {/if}
               </div>
          </div>
          <!-- step1 - 活动基本信息 -->
          <section v-show="currentStep === 1" class="public-container" style="padding: 20px;">
               <div class="layui-form create-form form-label-large">
                    <div class="container-header">
                         <p class=""><strong>基本信息</strong></p>
                         <hr>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label"><span style="color: red;">*</span> 活动名称：</label>
                         <div style="width: 464px;" class="layui-input-block">
                              <input type="text" name="name" id="name" value="{$qyFission->name}" required  lay-verify="required" placeholder="活动名称仅内部可见" autocomplete="off" class="layui-input">
                         </div>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label"><span style="color: red;">*</span> 活动结束时间：</label>
                         <div style="min-width: 0;width: 200px;" class="layui-input-block">
                              <input type="text" name="end_time" value="{date('Y-m-d H:i:s',$qyFission->endtime)}" class="layui-input" id="endTime" placeholder="请选择结束时间">
                         </div>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label"><span style="color: red;">*</span> 选择公众号：</label>
                         <div style="width: 464px;" class="layui-input-block">
                              <SELECT name="authorizer_appid" id="authorizer_appid" required  lay-verify="required" >
                                   <OPTION value=""></OPTION>
                                   {loop $gzh_list as $gzh_lists}
                                        {if $gzh_lists['authorizer_appid'] == $qyFission->authorizer_appid}
                                             <OPTION value="{$gzh_lists['authorizer_appid']}" selected>{$gzh_lists['message']}</OPTION>
                                        {else}
                                             <OPTION value="{$gzh_lists['authorizer_appid']}">{$gzh_lists['message']}</OPTION>
                                        {/if}
                                   {/loop}
                              </SELECT>
                         </div>
                    </div>
                    <div class="container-header">
                         <p class=""><strong>活动设置</strong></p>
                         <hr>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label">高级设置：</label>
                         <div style="width: auto;" class="layui-input-inline">
                              <input type="checkbox" name="new_friends"  lay-skin="switch" {if $qyFission->is_new == 1}checked{/if}>
                         </div>
                         <div class="layui-form-mid layui-word-aux">
                              <span>新好友才能助力</span>
                              <i class="iconfont icon-hint tooltip" data-content="开启后，若客户在活动前已添加过企业任意员工，该客户将不被计入助力次数"></i>
                         </div>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label"></label>
                         <div style="width: auto;" class="layui-input-inline">
                              <input  type="checkbox" name="del_friends" lay-skin="switch" {if $qyFission->is_help_set == 1}checked{/if}>
                         </div>
                         <div class="layui-form-mid layui-word-aux">好友退出全部群聊后助力失效</div>
                    </div>
                    <div class="public_form_List part-time-items" style="position: relative;">
                         <div class="public_formTitle_container">
                              <lable class="layui-form-label part-time-item-indexs"><span style="color: red;">*</span>领取奖励：</lable>
                         </div>
                         <div class="public_formOther_container">
                              <div class="layui-input-block" style="padding:10px 20px;background:#fdfdfd;">
                                   <div class="layui-input-block part-time-otype-radiobox" style="margin-left: 0;margin-bottom: 10px;" id="shareType">
                                        <input class="part-time-form-elems"  type="radio" lay-filter="shareType" name="shareType" value="1" title="自定义二维码"  {if $qyFission->award_data["type"] == 1}checked{/if}>
                                        <input class="part-time-form-elems"  type="radio" lay-filter="shareType" name="shareType" value="2" title="表单"  {if $qyFission->award_data["type"] == 2}checked{/if}>
                                        <input class="part-time-form-elems"  type="radio" lay-filter="shareType" name="shareType" value="3" title="兑换码"  {if $qyFission->award_data["type"] == 3}checked{/if}>
                                        <!-- <input class="part-time-form-elems"  type="radio" lay-filter="shareType" name="shareType" value="4" title="核销码"  {if $qyFission->award_data["type"] == 4}checked{/if}> -->
                                        <input class="part-time-form-elems"  type="radio" lay-filter="shareType" name="shareType" value="5" title="红包"  {if $qyFission->award_data["type"] == 5}checked{/if}>
                                        {if $pb_exist}
                                        <input class="part-time-form-elems"  type="radio" lay-filter="shareType" name="shareType" value="6" title="点大设置"  {if $qyFission->award_data["type"] == 6}checked{/if}>
                                        {/if}
                                   </div>
                                   <!-- 二维码 -->
                                   <div class="public_form_List part-time-otype-items" id="part_time_otype_code" {if $qyFission->award_data["type"] != 1}style="display: none;"{/if}>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 文字描述:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="code_content" id="code_content" value="{$qyFission->award_data['code_content']}" required  lay-verify="required" placeholder="文字描述" autocomplete="off" class="layui-input">
                                             </div>
                                        </div>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 上传二维码:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <div class="avatar-uploader">
                                                       <input type="hidden" name="code_img" id="code_img" value="{$qyFission->award_data['code_img']}" />
                                                       <img src="{$qyFission->award_data['code_img']}" class="avatar" id="code_imgs">
                                                       <button type="button" data-target="code_img" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                                                            <i class="layui-icon">&#xe654;</i>上传二维码
                                                       </button>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                                   <!-- 表单 -->
                                   <div class="public_form_List part-time-otype-items" id="part_time_otype_form" {if $qyFission->award_data["type"] != 2}style="display: none;"{/if}>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 文字描述:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="form_content" id="form_content" required  lay-verify="required" placeholder="文字描述" autocomplete="off" class="layui-input" value="{$qyFission->award_data['form_content']}">
                                             </div>
                                        </div>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 表单链接:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="form_url" id="form_url" required  lay-verify="required" placeholder="表单链接" autocomplete="off" class="layui-input" value="{$qyFission->award_data['form_url']}">
                                             </div>
                                        </div>
                                   </div>
                                   <!-- 兑换码 -->
                                   <div class="public_form_List part-time-otype-items" id="part_time_otype_codes" {if $qyFission->award_data["type"] != 3}style="display: none;"{/if}>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 文字描述:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="codes_content" id="codes_content" required  lay-verify="required" placeholder="文字描述" autocomplete="off" class="layui-input" value="{$qyFission->award_data['codes_content']}">
                                             </div>
                                        </div>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 奖品名称:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="codes_name" id="codes_name" required  lay-verify="required" placeholder="文字描述" autocomplete="off" class="layui-input" value="{$qyFission->award_data['codes_name']}">
                                             </div>
                                        </div>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 选择兑换码:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <select name="codes" lay-verify="" id="codes" lay-verify="required">
                                                    <option value=""></option>
                                                    {loop $convert_list as $convert}
                                                      <option value="{$convert['id']}" {if $convert['id'] == $qyFission->award_data["codes"]}selected{/if}>{$convert['name']}</option>
                                                    {/loop}
                                                  </select>     
                                             </div>
                                        </div>
                                   </div>
                                   <!-- 核销码 -->
                                   <!-- <div class="public_form_List part-time-otype-items" id="part_time_otype_hx" {if $qyFission->award_data["type"] != 4}style="display: none;"{/if}>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 文字描述:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="hx_content" id="hx_content" required  lay-verify="required" placeholder="文字描述" autocomplete="off" class="layui-input" value="{$qyFission->award_data['hx_content']}">
                                             </div>
                                        </div>
                                        <div class="dhj" style="display:block">
                                             <p style="height: 20px;"></p>
                                             <div class="layui-form-item">
                                                  <label class="layui-form-label"><span style="color: red;">*</span> 核销人员成员：</label>
                                                  <div class="layui-input-inline" style="width: auto;">
                                                       <button data-type="baseInfo1" onclick="ButLISE()" type="button" class="layui-btn layui-btn-primary">+ 添加核销成员</button>
                                                  </div>
                                                  <div class="layui-form-mid layui-word-aux">可添加多个企业成员分别进行裂变</div>
                                             </div> 
                                             <input type="hidden" id="hx_user" name="hx_user"  required  lay-verify="required" value="{implode(',',$qyFission->award_data['hx_user'])}">
                                             <div div="" class="layui-form-item"><label class="layui-form-label"></label>
                                                  <div id="selectedhxCon" name="selectedhxCon" class="flex align-start">
                                                       {loop $qyFission->award_data['hx_user'] as $users}
                                                            <div class="service-card">
                                                                 <i class="iconfont icon-person"></i>{$users}
                                                            </div>
                                                       {/loop}
                                                  </div>
                                             </div>
                                        </div>
                                   </div> -->
                                   <div class="public_form_List part-time-otype-items" id="part_time_otype_red" {if $qyFission->award_data["type"] != 5}style="display: none;"{/if}>
                                       <!--  <div class="layui-form-item">
                                          <div class="public_formTitle_container">
                                               <lable class="layui-form-label"><span style="color: red;">*</span>红包：</lable>
                                          </div>
                                          <div class="public_formOther_container">
                                               <div class="layui-input-block">
                                                    <select name="red" id="red" class="layui-input part-time-form-elems"   required  lay-verify="required">
                                                       <option value="">请根据红包名称选择红包模板</option>
                                                       {loop $redguest as $redgues}
                                                       <option value="{$redgues->id}" {$qyFission->award_data[""]}>{$redgues->red_name}</option>
                                                       {/loop}
                                                   </select>
                                               </div>
                                          </div>
                                        </div> -->
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 文字描述:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="red_content" id="red_content" value="{$qyFission->award_data['red_content']}" required  lay-verify="required" placeholder="文字描述" autocomplete="off" class="layui-input">
                                             </div>
                                        </div>
                                        <div class="public_formOther_container">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 请输入红包金额:</label>
                                             <div class="layui-input-block">
                                                  <input type="text" name="red" id="red" value="{$qyFission->award_data['red']}" required  lay-verify="required" placeholder="请输入红包金额" autocomplete="off" class="layui-input">
                                             </div>
                                        </div>
                                   </div>
                                    <div class="public_form_List part-time-otype-items" id="dianda" {if $qyFission->award_data["type"] != 6}style="display: none;"{/if}>
                                    <div class="public_form_content">
                                          <div class="layui-form-item">
                                              <label class="layui-form-label">发放优惠券</label>
                                              <div class="layui-input-block">
                                                <input type="checkbox" name="pb_coupon_statuss" lay-skin="switch" lay-filter="pb_coupons" {if $qyFission->award_data['pb_coupon_statuss']}  checked {/if}>
                                              </div>
                                          </div>
                                          <div class="layui-form-item pb_coupons" {if !$qyFission->award_data['pb_coupon_statuss']}  style="display: none;" {/if}>
                                            <label class="layui-form-label"> </label>
                                            <div class="layui-inline">
                                              <div class="layui-input-inline">
                                                  <select name="pb_coupon_ids">
                                                    {loop $pbCoupons as $coupon}
                                                    <option value="{$coupon['id']}" {if $qyFission->award_data['pb_coupon_ids'] == $coupon['id']}  selected {/if}>{$coupon['name']}</option>
                                                    {/loop}
                                                  </select>
                                                </div>
                                                <div class="layui-input-inline">
                                                  <input type="number" name="pb_coupon_nums" min=0 autocomplete="off" value="$qyFission->award_data['pb_coupon_nums']" class="layui-input" placeholder="请输入数量" >
                                                </div>
                                            </div>
                                          </div>
                                          <div class="layui-form-item">
                                              <label class="layui-form-label">会员等级</label>
                                              <div class="layui-input-block">
                                                <input type="checkbox" name="pb_setlevel_statuss" lay-skin="switch" lay-filter="pb_setlevels" {if $qyFission->award_data['pb_setlevel_statuss']}  checked {/if}>
                                              </div>
                                          </div>
                                          <div class="layui-form-item pb_setlevels" {if !$qyFission->award_data['pb_setlevel_statuss']}  style="display: none;" {/if} >
                                            <label class="layui-form-label"> </label>
                                            <div class="layui-input-inline">
                                                <select name="pb_setlevel_ids">
                                                  {loop $pbLevels as $level}
                                                  <option value="{$level['id']}" {if $qyFission->award_data['pb_setlevel_ids'] == $level['id']}  selected{/if}>{$level['name']}--{$level['discount']/1 == 10 ? '无折扣' : ($level['discount']/1).'折'}</option>
                                                  {/loop}
                                                </select>
                                              </div>
                                          </div>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label"><span style="color: red;">*</span>活动目标人数：</label>
                         <div style="width: auto;" class="layui-input-inline">
                              <input type="number" name="data_size" id="data_size" required  lay-verify="required" placeholder="请输入本次活动目标人数" autocomplete="off" class="layui-input" value="{$qyFission->size}" >
                         </div>
                         <div class="layui-form-mid layui-word-aux">
                              <span>邀请好友助力达到目标人数即为完成活动</span>
                              <i class="iconfont icon-hint tooltip" data-content="群裂变活动需求邀请好友数，最大限制100人"></i>
                         </div>
                    </div>
                     <!-- 点大商城 -->
                    {if $pb_exist}
                    <div class="public_form_content">
                      <div class="layui-form-item">
                          <label class="layui-form-label">发放优惠券</label>
                          <div class="layui-input-block">
                            <input type="checkbox" name="pb_coupon_status" lay-skin="switch" lay-filter="pb_coupon" {if $qyFission->pb_coupon_status} checked {/if}>
                          </div>
                      </div>
                      <div class="layui-form-item pb_coupon" {if !$qyFission->pb_coupon_status}style="display: none;"{/if}>
                        <label class="layui-form-label"> </label>
                        <div class="layui-inline">
                          <div class="layui-input-inline">
                              <select name="pb_coupon_id">
                                {loop $pbCoupons as $coupon}
                                <option value="{$coupon['id']}" {if $coupon['id']==$qyFission->pb_coupon_id}selected{/if}>{$coupon['name']}</option>
                                {/loop}
                              </select>
                            </div>
                            <div class="layui-input-inline">
                              <input type="number" name="pb_coupon_num" min=0 value="{$qyFission->pb_coupon_num}" autocomplete="off" class="layui-input" placeholder="请输入数量">
                            </div>
                        </div>
                      </div>
                      <div class="layui-form-item">
                          <label class="layui-form-label">会员等级</label>
                          <div class="layui-input-block">
                            <input type="checkbox"  name="pb_setlevel_status" lay-skin="switch" lay-filter="pb_setlevel" {if $qyFission->pb_setlevel_status} checked {/if}>
                          </div>
                      </div>
                      <div class="layui-form-item pb_setlevel" {if !$qyFission->pb_setlevel_status}style="display: none;"{/if}>
                        <label class="layui-form-label"> </label>
                        <div class="layui-input-inline">
                            <select name="pb_setlevel_id">
                              {loop $pbLevels as $level}
                              <option value="{$level['id']}" {if $level['id']==$qyFission->pb_setlevel_id}selected{/if}>{$level['name']}--{$level['discount']/1 == 10 ? '无折扣' : ($level['discount']/1).'折'}</option>
                              {/loop}
                            </select>
                          </div>
                      </div>
                    </div>
                    {/if}
               </div>
               <div style="margin-top: 40px;" class="layui-form-item">
                    <div class="layui-input-block">
                         <button @click="nextStep" type="button" class="layui-btn layui-btn-normal">下一步</button>
                    </div>
               </div>
          </section>

          <!-- step2 - 欢迎语和海报 -->
          <section v-show="currentStep === 2" class="public-container">
               <div class="layui-form create-form poster-form">
                    <div class="container-header">
                         <p class=""><strong>裂变海报设置</strong></p>
                         <hr>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label">裂变海报：</label>
                         <div class="layui-input-block">
                              <!-- 海报编辑区 -->
                              <div  class="flex poster-edit-container">
                                   <div class="poster-previewer" id="posterimgshow" style="background: url({$qyFission->poster_imgurl}) center center /cover;">
                                        <div id="headImg">
                                             <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/image_proxy.png" alt="">
                                        </div>
                                        <div class="draggables" id="usefMove">
                                             <span class="poster-nickname" ><font id="nicheng" size="{$poster_fontstyle->size}" color="{$poster_fontstyle->color}">用户昵称</font></span>
                                        </div>
                                        <div class="poster-qrcode" id="draggable">
                                             <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/ewm.png" alt="">
                                        </div>
                                   </div>
                                   <div class="flex-1 poster-edit-box">
                                        <p style="margin-bottom: 15px;"><strong>海报设置：</strong></p>
                                        <div style="margin-bottom: 10px;" class="flex">
                                             <label style="width: auto;padding-left: 0;" class="layui-form-label">用户头像</label>
                                             <input type="checkbox" {if $qyFission->poster_avatar}checked{/if} name="poster_avatar" lay-skin="switch">
                                             <label class="layui-form-label">用户昵称</label>
                                             <input type="checkbox" {if $qyFission->poster_nickname}checked{/if} name="poster_nickname" lay-skin="switch">
                                        </div>
                                        <div class="flex">
                                             <label style="width: auto;padding-left: 0;" class="layui-form-label">文字颜色</label>
                                             <div>
                                                  <form class="layui-form" action="">
                                                       <div class="layui-form-item">
                                                            <div class="layui-input-inline" style="width: 120px;">
                                                                 <input type="text" name="poster_fontstyle[color]" value="{$poster_fontstyle->color}" placeholder="请选择颜色" class="layui-input" id="test-form-input">
                                                            </div>
                                                            <div class="layui-inline" style="left: -11px;">
                                                                 <div id="test-form"></div>
                                                            </div>
                                                       </div>
                                                  </form>
                                             </div>
                                        </div>
                                        <div class="flex">
                                             <label style="width: auto;padding-left: 0;" class="layui-form-label">文字大小</label>
                                             <div>
                                                  <div class="layui-form-item">
                                                       <div class="layui-input-inline" style="width: 120px;">
                                                            <input type="text" id="size"name="poster_fontstyle[size]" value="{$poster_fontstyle->size}" placeholder="请输入..." class="layui-input" >
                                                       </div>
                                                       <div class="layui-inline" style="left: -11px;">
                                                            <div id="test-form"></div>
                                                       </div>
                                                  </div>
                                             </div>
                                        </div>
                                        <div style="margin: 20px 0 10px;">
                                             <input type="hidden" name="poster_imgurl" value="{$qyFission->poster_imgurl}" id="poster_imgurl" />
                                             <button type="button" data-target="poster_imgurl" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                                                  <i class="layui-icon">&#xe654;</i>上传海报
                                             </button>
                                        </div>
                                        <div class="poster-tips">
                                             <p>裂变海报设计须知：</p>
                                             <p>（1）尺寸：800px*1300px，分辨率78</p>
                                             <p>（2）[用户头像] [用户昵称] [裂变带参二维码] 这三个元素需要空出</p>
                                             <p>（3）裂变海报其他部分皆可自定义设计</p>
                                             <p>（4）裂变海报大小不超过2M</p>
                                        </div>
                                   </div>
                              </div>
                              <input type="hidden" name="avtar_style[left]" value="{$avtar_style->left}" id="imgurl_left3"/>
                              <input type="hidden" name="avtar_style[top]" value="{$avtar_style->top}" id="imgurl_top3"/>
                              <input type="hidden" name="poster_coordinate[imgurl_left]" value="{if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_left']}{else}162{/if}" id="imgurl_left"/>
                              <input type="hidden" name="poster_coordinate[imgurl_top]" value="{if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_top']}{else}338{/if}" id="imgurl_top"/>
                              <input type="hidden"  id="Aname" name="Aname">
                              <input type="hidden" name="poster_fontstyle[left]" value="{$poster_fontstyle->left}" id="imgurl_left1"/>
                              <input type="hidden" name="poster_fontstyle[top]"value="{$poster_fontstyle->top}" id="imgurl_top1"/>
                         </div>
                    </div>
                    <div class="layui-form-item">
                         <label class="layui-form-label">裂变海报：</label>
                         <div style="float: left;margin: auto 10px auto 0;width: auto;min-width: 0;" class="layui-input-block">
                              <input type="checkbox" {if $qyFission->forward_set}checked{/if} name="forward_set" lay-skin="switch">
                         </div>
                         <div class="layui-form-mid layui-word-aux">设置海报转发话术，开启后客户可直接复制文案分享</div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                         <div class="layui-input-block">
                              <div class="poster-talk">
                                   <textarea name="forward_text" maxlength="200" placeholder="请输入海报转发话术" value="{$qyFission->forward_text}" class="layui-textarea">{$qyFission->forward_text}</textarea>
                              </div>
                         </div>
                    </div>
                    <!-- 设置欢迎语1-2 -->
                    <div class="container-header">
                         <p class=""><strong>入群欢迎语素材设置</strong></p>
                         <hr>
                    </div>
                    <div class="welcome-tip">
                         <div style="margin-right: 11px; word-break: keep-all;white-space: nowrap;"> 提示: </div>
                         <div class="text-content">
                              <span> 1、 设置入群欢迎语素材目的是为了邀请客户参与活动，是整个裂变活动中重要的步骤 </span> 
                              <span> 2、活动创建成功后，欢迎语链接将自动填入裂变活动链接 </span> 
                              <span class="warn"> 3、群欢迎语素材设置完成后，请提示对应的群主前往移动端活动群聊设置入群欢迎语，客户进群才会收到参与活动链接哦～ 
                                   <span class="text-blue how-to-look">
                                        <span class="tips-wrap" style="">
                                             <span>
                                                  <a  target="_blank" href="https://assets.weibanzhushou.com/web/we-work-webapp/group-fission_create_step-3-setting.14e2a7554e0e.png">如何设置</a>
                                             </span>
                                        </span>
                                   </span>
                              </span>
                         </div>
                    </div>
                    <div style="-webkit-box-align: start;align-items: flex-start;" class="flex">
                         <div class="flex-1">
                              <div class="layui-form-item">
                                   <label class="layui-form-label"><span style="color: red;">*</span> 欢迎语1：</label>
                                   <div class="layui-input-block rich-text-wrap">
                                        <div class="insert-btn">
                                             <span id="inserts" unselectable="on" onmousedown="return false">[插入客户昵称]</span>
                                        </div>
                                        <div contenteditable="true" id="edit_hy_text_content_div" name="edit_hy_text_content_div" class="layui-textarea">{$qyFission->welcome_one}</div>
                                        <div class="rich-text-box">
                                             <input type="hidden" name="hy_text_content" id="edit_hy_text_content_textarea" />
                                             <input type="hidden" name="invitation_text" id="edit_hy_text_content_textareas" />
                                        </div>
                                   </div>
                              </div>
                              <div class="layui-form-item">
                                   <label class="layui-form-label"><span style="color: red;">*</span> 欢迎语2：</label>
                                   <div class="layui-input-block rich-text-wrap">
                                        <div class="link-card">
                                             <div class="title"  id="title_tows">{$qyFission->welcome_tow["link_title"]}</div>
                                             <div class="info flex-s-b-c"><span class="desc" id="desc_tows">{$qyFission->welcome_tow["link_desc"]}</span> 
                                                  {if $qyFission->welcome_tow["link_pic"]}
                                                       <img class="cover-img" id="award_one" src="{$qyFission->welcome_tow['link_pic']}">
                                                  {else}
                                                       <img class="cover-img" id="award_one" src="https://assets.weibanzhushou.com/default-cover.png">
                                                  {/if}
                                             </div>
                                        </div>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 链接标题:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="link_title" id="link_title" value="点击这里，完成任务领取奖品吧👇" required  lay-verify="required" placeholder="点击这里，完成任务领取奖品吧👇" autocomplete="off" class="layui-input" value="{$qyFission->welcome_tow['link_title']}">
                                             </div>
                                        </div>
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span> 链接摘要:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="text" name="link_desc" id="link_desc" value="快来参加活动吧" required  lay-verify="required" placeholder="快来参加活动吧" autocomplete="off" class="layui-input" value="{$qyFission->welcome_tow['link_desc']}">
                                             </div>
                                        </div>
                                         <div class="layui-form-item">
                                             <label class="layui-form-label">链接封面:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <div class="avatar-uploader">
                                                       <input type="hidden" name="imgur" id="images" value="{$qyFission->welcome_tow['link_pic']}" />
                                                       <img src="{$qyFission->welcome_tow['link_pic']}" class="avatar" id="images_one"{if !$qyFission->welcome_tow['link_pic']} style="display:none;"{/if}>
                                                       <button type="button" data-target="images" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                                                            <i class="layui-icon">&#xe654;</i>上传封面
                                                       </button>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                              </div>
                              <div style="margin-top: 40px;" class="layui-form-item">
                                   <div class="layui-input-block">
                                        <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button>
                                        <button @click="nextStep" type="button" class="layui-btn layui-btn-normal">下一步</button>
                                   </div>
                              </div>
                         </div>

                         <div class="phone-previewer">
                              <div class="phone-pre-content">
                              <img src="/fission/img/phone-box.png" class="phone-bg" alt="">
                                   <div class="phone-content">
                                   <p class="date">17:20</p>
                                        <div class="phone-msg-wrap">
                                             <div class="phone-msg phone-msg-text">
                                                  <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                                                  <div>你好，我们正在进行xxx活动，只要邀请x位好友添加我的微信就可以获得奖品

                                                  参与流程：
                                                  ①将海报发给好友或朋友圈
                                                  ②邀请x位好友扫码添加，即可成功获得奖品
                                                  ③进入链接点击查看进度，完成任务后即可领取奖励哦      

                                                  快去分享您的专属海报吧↓↓↓  
                                                  </div>
                                             </div>
                                             <div class="phone-msg phone-msg-news">
                                             <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                                                  <div class="news">
                                                       <p class="title" id="title_ones">{$qyFission->welcome_tow["link_title"]}</p>
                                                       <div>
                                                            <span class="desc" id="desc_ones">{$qyFission->welcome_tow["link_desc"]}</span>
                                                            {if $qyFission->welcome_tow["link_pic"]}
                                                                 <img id="award_ones" src="{$qyFission->welcome_tow['link_pic']}">
                                                            {else}
                                                                 <img id="award_ones" src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png">
                                                            {/if}
                                                       </div>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>

               </div>
          </section>

          <!-- step3 - 企微群聊二维码设置 -->
          <section v-show="currentStep === 3" class="public-container">
               <div class="create-form layui-form" action="">
                    <div class="container-header">
                         <p class=""><strong>企微群聊二维码设置</strong></p>
                         <hr>
                    </div>
                    <div class="setting-tip">
                         <div style="margin-right: 11px;">
                              <span class="icon-wrap " style="color: rgba(250, 173, 20, 1)">
                                   <i aria-label="icon: exclamation-circle" class="anticon anticon-exclamation-circle icon ">
                                        <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                             <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                             <path d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path>
                                        </svg>
                                   </i>
                              </span>
                         </div>
                         <div class="text-content">
                              <span>1、注意群聊二维码有效期为7天，需要及时更换哦，以防客户进群失效哦～</span>
                              <span>2、上传群二维码请 <span class="warn">仔细核对</span> ，群聊二维码和群聊 <span class="warn">对应错误</span> 将导致 <span class="warn">客户进群失效哦~</span></span> 
                              <span>3、同一群聊不能应用于多个群裂变活动，可能导致群上限控制精度降低，出现客户无法正常加入群聊，或数据计算异常的情况</span>
                              <span>4、群聊二维码可以及时更换，群不可以更改</span>
                         </div>
                    </div>
                    <div class="layui-form-item" style="margin-top: 20px;">
                         <label class="layui-form-label"><span style="color: red;">*</span>群聊二维码:</label>
                         <div style="width: 464px;" class="layui-input-block">
                              <div class="avatar-uploader">
                                  <div style="margin-bottom: 16px; margin-top: 0; color: rgba(0, 0, 0, 0.44); padding: 8px 16px; background: #EFFAFF;" class="notify-info">
                                        <svg style="color: #0099FF;" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use xlink:href="#tixing"><svg id="tixing" viewBox="0 0 1024 1024"><path d="M847.596308 710.813538c-18.274462-34.185846-40.96-166.596923-40.96-288.768 0-122.092308-39.699692-220.553846-133.12-266.555076-32.137846-15.753846-91.293538-48.521846-98.934154-85.07077C567.099077 33.870769 556.307692 0 512.669538 0c-0.315077 0-0.551385 1.024-0.787692 1.181538C511.409231 1.102769 511.251692 0 510.936615 0c-43.638154 0-54.587077 33.713231-61.991384 70.340923-7.561846 36.627692-66.796308 69.316923-98.934154 85.149539-93.341538 46.001231-133.12 144.462769-133.12 266.555076 0 122.249846-22.685538 254.660923-40.96 288.768-18.116923 34.107077-57.974154 66.638769-57.974154 111.064616v37.100308s222.916923-37.021538 392.979692-37.021539c169.905231 0 394.712615 37.021538 394.712616 37.021539v-37.021539c-0.236308-44.504615-39.936-77.036308-58.131693-111.064615z m-336.738462 155.411693c-39.542154 0-81.841231 2.126769-123.510154 5.198769 12.051692 64.039385 61.833846 113.191385 124.455385 113.191385 62.779077 0 112.324923-48.994462 124.455385-113.112616a1767.817846 1767.817846 0 0 0-125.400616-5.277538z"></path></svg></use></svg>  若群内添加了小助理机器人，请将【人数上限减1】，可能会导致客户进群失败 
                                   </div>
                              </div>
                         </div>
                    </div>
                    <!-- 群聊二维码选择 设置一个例子 -->
                    <div id="group_qrcode">
                         {loop $qyFission->group_code_data as $key=>$group}
                              <div class="layui-form-item group_qrcode_li">
                                   <label class="layui-form-label part-time-item-index" style="width: 140px;"><span style="color: red;">*</span>群聊二维码{$key+1}：</label>
                                   <div class="layui-input-block rich-text-wrap">
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span>群人数上限:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <input type="number" name="num{$key+1}" id="num{$key+1}" value="{$group['num']}" required  lay-verify="required" placeholder="请输入群人数上限" autocomplete="off" class="layui-input addPeople" {if $group['status'] != 1}readonly="readonly"{/if}>
                                             </div>
                                        </div>
                                        <input type="hidden" name="status{$key+1}" value="{$group['status']}">
                                        <div class="layui-form-item">
                                             <label class="layui-form-label"><span style="color: red;">*</span>群二维码:</label>
                                             <div style="width: 464px;" class="layui-input-block">
                                                  <div class="avatar-uploader">
                                                       <input type="hidden" name="group_code{$key+1}" id="group_code{$key+1}" class="addPeople" value="{$group['group_code']}" />
                                                       <img src="{$group['group_code']}" class="avatar addPeople" id="data_group_code{$key+1}">
                                                       <button type="button" data-target="group_code{$key+1}" class="layui-btn layui-btn-sm layui-btn-normal addPeople" onclick="select_imgs(this)">
                                                            <i class="layui-icon">&#xe654;</i>上传二维码
                                                       </button>
                                                  </div>
                                             </div>
                                        </div>
                                        <div class="dhj" style="display:block">
                                             <div class="layui-form-item">
                                                  <label class="layui-form-label"><span style="color: red;">*</span>选择群聊：</label>
                                                  <div class="layui-input-inline" style="width: auto;">
                                                       <button data-target="{$key+1}" onclick="selectgroup(this)" type="button" class="layui-btn layui-btn-primary addPeople" {if $group["status"] != 1} data-id="1" {/if}>+ 选择群聊</button>
                                                  </div>
                                             </div> 
                                             <input type="hidden" id="selectgroup_one{$key+1}" name="selectgroup_one{$key+1}" class="addPeople" required  lay-verify="required" value="{$group['group_chat_id']}">
                                             <div div="" class="layui-form-item"><label class="layui-form-label"></label>
                                                  <div id="selectgroup{$key+1}" name="selectgroup1" class="flex align-start addPeople">
                                                       <div class="service-card">{$this->get_group_name($group['group_chat_id'])}</div>
                                                  </div>
                                             </div>
                                        </div>
                                        <!-- 删除按钮 -->
                                        <button type="button" onclick="onews(this)"  class="layui-btn layui-btn-sm layui-btn-primary part-time-item-del addPeople" style="margin-left: 101%;" {if $group["status"] != 1} data-id="1" {/if}>
                                             <i class="layui-icon">&#xe640;</i>
                                        </button>
                                   </div>
                              </div>
                         {/loop}
                         <!-- 添加按钮 -->
                    </div>
                    <input type="hidden" id="partTimeCount" name="counts" value="{count($qyFission->group_code_data)}">
                    <button type="button" onclick="onew()" class="layui-btn layui-btn-primary part-time-btn-add"style="color: #1E9FFF;margin-left: 120px;border: 0;background: transparent;"><i class="layui-icon">&#xe608;</i> 添加群聊二维码</button>
                    <div style="margin-top: 40px;" class="layui-form-item">
                         <div class="layui-input-block">
                              <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button>
                              <button {if $qyFission->id} onclick="submitForm()" {else} @click="nextStep" {/if} type="button" class="layui-btn layui-btn-normal">下一步</button>
                         </div>
                    </div>
               </div>
          </section>
     </div>
</form> 
<template id="list">
     <div>
          <slot name="text"></slot>
     </div>
</template>
<script type="text/javascript">
     function onew() {
          var $items = $('#group_qrcode .group_qrcode_li')
          var length = $items.length
          if (!length) {
               return console.error('至少要有一个 .group_qrcode_li 用作模板')
          }
          var tpl = $items.eq(0).clone(false)
          setPartTimeItemId(tpl, length + 1, true)
          $("#group_qrcode").append(tpl)
          setCount(length + 1)
     }
     function setPartTimeItemId($item, index, clear) {
          $item.find('.part-time-item-index').text('群聊二维码' + index + '：')
          var $sImgBtns = $item.find('.addPeople')
          for (var i = 0, l = $sImgBtns.length; i < l; i++) {
               setElemAttr($($sImgBtns[i]), index)
          }
          return $item
     }
     function setElemAttr($elem, index) {
          var id = $elem.attr('id'), name = $elem.attr('name'), _name = $elem.attr('_name'), dataTarget = $elem.attr('data-target'), layKey = $elem.attr('lay-key'), xmSelect = $elem.attr('xm-select');
          var reg = /([0-9]+)/g
          $elem.attr({
               id: id && (id.replace(reg, '') + index),
               name: name && (name.replace(reg, '') + index),
               'data-id': 0, // 上传图片按钮
               'data-target': dataTarget && (dataTarget.replace(reg, '') + index), // 上传图片按钮
               '_name': _name && (_name.replace(reg, '') + index), // 日期多选
               'xm-select': xmSelect && (xmSelect.replace(reg, '') + index), // 日期多选
               'lay-key': layKey ? (String(index) + Date.now()) : layKey, // 时间选择器
               'readonly': false, 
          });
     }
     // 删除时间段
     function onews(th){
          if($(th).data("id")){
               layer.msg("活动正在进行中，不可删除");
               return false;
          }
          if ($('#group_qrcode .group_qrcode_li').length <= 1) {
               tusi('不能再少了')
          } else {
               $(th).parent().parent().remove();
               updateItemsOrder()
          }
     }
     function updateItemsOrder() {
          var $items = $('#group_qrcode .group_qrcode_li')
          var l = $items.length
          setCount(l)
          for (var i = 0; i < l; i++) {
               var $theItem = $($items[i])
               setPartTimeItemId($theItem, i + 1, false)
          }
          layui.form.render()
     }

     function setCount(n) {
          if (n === undefined) {
               n = $('#group_qrcode .group_qrcode_li').length
          }
          $('#partTimeCount').val(n)
     }
</script>
<script>
    // Vue控制示例
    var app = new Vue({
          el: '#app',
          data: {
               currentStep: 1,
          },
          components: {
               "list": {
                    template: "#list",
               }
          },
          methods: {
               // 提交按钮
               submit() {
                    var asdf =JSON.stringify(this.editableTabs);
                    $('#Aname').val(asdf);
               },
               prevStep() {
                    this.currentStep -= 1
               },
               nextStep() {
                    if (this.currentStep >= 4) {      
                         return false;
                    }else if(this.currentStep == 1){
                         if(!$('#name').val() || !$('#endTime').val() || !$('#data_size').val()){
                              tusi('必填项不能为空');
                              return false;
                         }
                         if($("input[name='shareType']:checked").val() == 1){
                              if(!$('#code_content').val() || !$('#code_img').val()){
                                   tusi('自定义二维码内容不可为空');
                                   return false;
                              }
                         }else if($("input[name='shareType']:checked").val() == 2){
                              if(!$('#form_content').val() || !$('#form_url').val()){
                                   tusi('表单内容不可为空');
                                   return false;
                              }
                         }else if($("input[name='shareType']:checked").val() == 3){
                              if(!$('#codes_content').val() || !$('#codes_name').val() || !$('#codes').val()){
                                   tusi('兑换码内容不可为空');
                                   return false;
                              }
                         }else if($("input[name='shareType']:checked").val() == 4 ){
                              if(!$('#hx_user').val() || !$('#hx_content').val()){
                                   tusi('核销码内容不可为空');
                                   return false;
                              }
                         }else if($("input[name='shareType']:checked").val() == 5){
                              if(!$('#red').val() || !$("#red_content").val()){
                                   tusi('红包内容不可为空');
                                   return false;
                              }
                         }
                         this.submit()
                    }else if(this.currentStep == 3){
                         if(!$('#num1').val() || !$('#group_code1').val() || !$('#selectgroup_one1').val()){
                              tusi('必填项不能为空');
                              return false;
                         } 
                    }
               this.currentStep += 1
               }
          }
     })

     function submitForm(){
          hy_text_content = $("#edit_hy_text_content_div").html();
          hy_content = $("#invitation_texts_one").html();
          $("#edit_hy_text_content_textarea").val(hy_text_content);
          $("#edit_hy_text_content_textareas").val(hy_content);
          var formData = $('#form1').serialize(); 
          myAjaxPost(false, true, '', formData, function (resp) {
               alert(resp.msg);
               if (resp.status == 'success') {
                    location.href = 'index.html'; 
               }
          });
     }
  </script>
  <script>
     function ButLISE(){
          layer.open({
               type: 2,
               title: '请选择使用人员',
               shadeClose: true,
               shade: 0.2,
               area: ['700px', '530px'],
               content: 'select_user-3.html',
               end:function () {
                    var selectedhtml = $("#selectedhtml").val();
                    if(selectedhtml){
                         $("[name=selectedhxCon]").each(function(){
                              $(this).html(selectedhtml);  
                         });  
                    }
               }
          });
     }
     $('#addEt').on('click',function(){
          layer.open({
               type: 2,
               title: '请选择客户',
               shadeClose: true,
               shade: 0.2,
               area: ['700px', '600px'],
               content: 'select_et.html'
          }); 
     })

  </script>

  <!-- 拖拽 -->
  <script>
    $('#size').change(function () {
      // alert($('#size').val());
      $('#nicheng').attr('size',$('#size').val());
        
      });

      //获取需要拖拽的元素
      var divs = document.querySelector('#draggable');
      var user = document.querySelector('#usefMove');
      var headImg = document.querySelector('#headImg');
      headImg.onmousedown = function(evy){

          //event的兼容性
          var evy = evy||event;

          //获取鼠标按下的坐标
          var xy1 = evy.clientX;
          var yy1 = evy.clientY;

          //获取元素的left，top值
          var ly = headImg.offsetLeft;
          var ty = headImg.offsetTop;

          //给可视区域添加鼠标的移动事件
          document.onmousemove = function(evy){

              //event的兼容性
              var evy = evy||event;

              //获取鼠标移动时的坐标
              var xy2 = evy.clientX;
              var yy2 = evy.clientY;

              //计算出鼠标的移动距离
              var xy = xy2-xy1;
              var yy = yy2-yy1;

              //移动的数值与元素的left，top相加，得出元素的移动的距离
              var lty = yy+ty;
              var lsy = xy+ly;
              if(lty>=373){
                lty = 373
              }
              if(lty<=0){
                lty = 0
              }
              if(lsy<=0){
                lsy = 0
              }
              if(lsy>=200){
                lsy = 200
              }
              //更改元素的left，top值
              headImg.style.top = lty+'px';
              headImg.style.left = lsy+'px';
               $('#imgurl_left3').val(lsy);
               $('#imgurl_top3').val(lty);
          }

          //清除
          document.onmouseup = function(evy){

              document.onmousemove = null;

          }

      }

      user.onmousedown = function(evh){

          //event的兼容性
          var evh = evh||event;

          //获取鼠标按下的坐标
          var xh1 = evh.clientX;
          var yh1 = evh.clientY;

          //获取元素的left，top值
          var lh = user.offsetLeft;
          var th = user.offsetTop;

          //给可视区域添加鼠标的移动事件
          document.onmousemove = function(evh){

              //event的兼容性
              var evh = evh||event;

              //获取鼠标移动时的坐标
              var xh2 = evh.clientX;
              var yh2 = evh.clientY;

              //计算出鼠标的移动距离
              var xh = xh2-xh1;
              var yh = yh2-yh1;

              //移动的数值与元素的left，top相加，得出元素的移动的距离
              var lth = yh+th;
              var lsh = xh+lh;
              if(lth>=379){
                lth = 379
              }
              if(lth<=0){
                lth = 0
              }
              if(lsh<=0){
                lsh = 0
              }
              if(lsh>=168){
                lsh = 168
              }
              //更改元素的left，top值
              user.style.top = lth+'px';
              user.style.left = lsh+'px';
        $('#imgurl_left1').val(lsh);
        $('#imgurl_top1').val(lth);
          }

          //清除
          document.onmouseup = function(evh){

              document.onmousemove = null;

          }

      }



      //元素的鼠标落下事件
      divs.onmousedown = function(ev){

          //event的兼容性
          var ev = ev||event;

          //获取鼠标按下的坐标
          var x1 = ev.clientX;
          var y1 = ev.clientY;

          //获取元素的left，top值
          var l = divs.offsetLeft;
          var t = divs.offsetTop;

          //给可视区域添加鼠标的移动事件
          document.onmousemove = function(ev){

              //event的兼容性
              var ev = ev||event;

              //获取鼠标移动时的坐标
              var x2 = ev.clientX;
              var y2 = ev.clientY;

              //计算出鼠标的移动距离
              var x = x2-x1;
              var y = y2-y1;

              //移动的数值与元素的left，top相加，得出元素的移动的距离
              var lt = y+t;
              var ls = x+l;
              if(lt>=338){
                lt = 338
              }
              if(lt<=0){
                lt = 0
              }
              if(ls<=0){
                ls = 0
              }
              if(ls>=162){
                ls = 162
              }
              //更改元素的left，top值
              divs.style.top = lt+'px';
              divs.style.left = ls+'px';
        $('#imgurl_left').val(ls);
        $('#imgurl_top').val(lt);
          }

          //清除
          document.onmouseup = function(ev){

              document.onmousemove = null;

          }

      }

  </script>

<script>
     layui.use('colorpicker', function(){
          var $ = layui.$
          ,colorpicker = layui.colorpicker;

          //表单赋值
          colorpicker.render({
               elem: '#test-form'
               ,color: '#1c97f5'
               ,done: function(color){
                    $('#test-form-input').val(color);
                    $('#nicheng').attr('color',color);
               }
          });

     });
     layui.use('upload', function(){
          var upload = layui.upload;

          //执行实例
          var uploadInst = upload.render({
               accept: 'file'
               ,field: 'file'
               ,elem: '#test1' //绑定元素
               ,url: 'upload_file.html' //上传接口
               ,done: function(res){
                    //上传完毕回调
                    layer.msg(res.msg);
                    if(res.status == 'success'){
                         $('#file_path').val(res.data.filePath);
                         $('#file_name').val(res.data.fileName);
                         $('#file_name_show').html(res.data.fileName);
                    }
               }
               ,error: function(){
               //请求异常回调
               }
          });
     });
</script>
<script>
layui.use('laydate', function(){
     var laydate = layui.laydate;
     laydate.render({
          elem: '#endTime' //指定元素
          ,type: 'datetime'
          ,min: 0
     });
});
layui.use('form', function(){
     var form = layui.form;
      // 发放优惠券
      form.on('switch(pb_coupons)', function(data){
          if(data.elem.checked == true){
            $(".pb_coupons").show();
          }else{
            $(".pb_coupons").hide();
          }
          form.render();
      });
      // 设置等级
      form.on('switch(pb_setlevels)', function(data){
          if(data.elem.checked == true){
            $(".pb_setlevels").show();
          }else{
            $(".pb_setlevels").hide();
          }
          form.render();
      });

      // 发放优惠券
      form.on('switch(pb_coupon)', function(data){
          if(data.elem.checked == true){
            $(".pb_coupon").show();
          }else{
            $(".pb_coupon").hide();
          }
          form.render();
      });
      // 设置等级
      form.on('switch(pb_setlevel)', function(data){
          if(data.elem.checked == true){
            $(".pb_setlevel").show();
          }else{
            $(".pb_setlevel").hide();
          }
          form.render();
      });
    
     form.on('radio(shareType)', function (data) {
          if ($('#zanbu input[name="invitation_check"]:checked').val() == "1") {
               $("#select_user_select").show();
          }else if ($('#zanbu input[name="invitation_check"]:checked').val() == "2") {
               $("#select_user_select").hide();
          }
          if ($('#shaixuan input[name="invitation_range"]:checked').val() == "1") {
               $("#users_select").hide();
          }else if ($('#shaixuan input[name="invitation_range"]:checked').val() == "2") {
               $("#users_select").show();
          }
          if ($('#shareType input[name="shareType"]:checked').val() == "1") {
               $("#part_time_otype_code").show();
               $("#part_time_otype_form").hide();
               $("#part_time_otype_codes").hide();
               $("#dianda").hide();
               $("#part_time_otype_hx").hide();
               $("#part_time_otype_red").hide();
          }else if ($('#shareType input[name="shareType"]:checked').val() == "2") {
               $("#part_time_otype_code").hide();
               $("#part_time_otype_form").show();
               $("#dianda").hide();
               $("#part_time_otype_codes").hide();
               $("#part_time_otype_hx").hide();
               $("#part_time_otype_red").hide();
          }else if ($('#shareType input[name="shareType"]:checked').val() == "3") {
               $("#part_time_otype_code").hide();
               $("#part_time_otype_form").hide();
               $("#part_time_otype_codes").show();
               $("#dianda").hide();
               $("#part_time_otype_hx").hide();
               $("#part_time_otype_red").hide();
          }else if ($('#shareType input[name="shareType"]:checked').val() == "4") {
               $("#part_time_otype_code").hide();
               $("#part_time_otype_form").hide();
               $("#part_time_otype_codes").hide();
               $("#dianda").hide();
               $("#part_time_otype_hx").show();
               $("#part_time_otype_red").hide();
          }else if ($('#shareType input[name="shareType"]:checked').val() == "5") {
               $("#part_time_otype_code").hide();
               $("#part_time_otype_form").hide();
               $("#part_time_otype_codes").hide();
               $("#dianda").hide();
               $("#part_time_otype_hx").hide();
               $("#part_time_otype_red").show();
          }else if ($('#shareType input[name="shareType"]:checked').val() == "6") {
               $("#part_time_otype_code").hide();
               $("#part_time_otype_form").hide();
               $("#part_time_otype_codes").hide();
               $("#part_time_otype_hx").hide();
               $("#part_time_otype_red").hide();
               $("#dianda").show();
          }
     })
})
//输入框改变事件
$('#link_title').bind('keyup', function(event) {
     $('#title_tows').text($(this).val());
     $('#title_ones').text($(this).val());
})
$('#link_desc').bind('keyup', function(event) {
     $('#desc_tows').text($(this).val());
     $('#desc_ones').text($(this).val());
})
//输入框改变事件
$('#link_tow_title').bind('keyup', function(event) {
     $('#title_toww_tows').text($(this).val());
     $('#title_toww_ones').text($(this).val());
})
$('#link_tow_desc').bind('keyup', function(event) {
     $('#desc_toww_tows').text($(this).val());
     $('#desc_toww_ones').text($(this).val());
})
function select_imgs(th){
     var targetId=th.getAttribute('data-target');
     console.log(targetId);
     layer.open({
          title:'图片库',
          type: 2,
          area: ['700px', '450px'],
          fixed: false, //不固定
          maxmin: false,
          content: '/imgLib/lib.html?type=vshop_img&target='+targetId
     });
}

$('.select_img').on('click',function  () {
     var targetId=this.getAttribute('data-target');
     layer.open({
          title:'图片库',
          type: 2,
          area: ['700px', '450px'],
          fixed: false, //不固定
          maxmin: false,
          content: '/imgLib/lib.html?type=vshop_img&target='+targetId
     });
})

window.uploadImgCallback=function (tgt,url) {
     console.log('选择图片结果',tgt,url);
     if(tgt=='poster_imgurl'){
          var inputEle=$('#poster_imgurl');
          var prevEle=$('#posterimgshow');
          inputEle.val(url);
          prevEle.css('background',"url("+url+")center center /cover");
     }else if(tgt=='one_images'){
          var inputEle=$('#one_images');
          var prevEle=$('#one_images_one');
          $("#award_tow").attr("src",url);
          $("#award_tows").attr("src",url);
          inputEle.val(url);
          prevEle.attr('src',url);
          prevEle.show();
     }else if(tgt=='push_image'){
          var inputEle=$('#push_image');
          var prevEle=$('#pic_push_image');
          inputEle.val(url);
          prevEle.attr('src',url);
          prevEle.show();
     }else if(tgt=='invitationLinkPic'){
          var inputEle=$('#invitationLinkPic');
          var prevEle=$('#pic_invitationLinkPic');
          inputEle.val(url);
          prevEle.attr('src',url);
          //prevEle.show();
     }else if(tgt=='lj_qrcode'){
          var inputEle=$('#lj_qrcode');
          var prevEle=$('#pic_lj_qrcode');
          inputEle.val(url);
          prevEle.attr('src',url);
          prevEle.show();
     }else if(tgt=='code_img'){
          var img=$('#code_img');
          var imgs=$('#code_imgs');
          img.val(url);
          imgs.attr('src',url);
          imgs.show();
     }else if(tgt=='images'){
          var img=$('#images');
          var imgs=$('#images_one');
          $("#award_one").attr("src",url);
          $("#award_ones").attr("src",url);
          img.val(url);
          imgs.attr('src',url);
          imgs.show();
     }else if(tgt.indexOf('group_code') > -1){ // 分时段 通用
          var inputEle=$('#' + tgt);
          var prevEle=$('#data_' + tgt);
          inputEle.val(url);
          prevEle.attr('src',url);
          prevEle.show();
     }
};


function selectgroup(th){
     var size=th.getAttribute('data-target');
     var id=th.getAttribute('data-id');
     if(id == 1){
          layer.msg("活动正在进行中，不可修改");
          return false;
     }
     layer.open({
          type: 2,
          title: '请选择使用人员',
          shadeClose: true,
          shade: 0.2,
          area: ['700px', '530px'],
          content: 'select_group-'+size+'.html'
     }); 
}
</script>
<script type="text/javascript">
        // 在光标位置插入html代码，如果dom没有获取到焦点则追加到最后
        window.onload= function(){
            function insertAtCursor(jsDom, html) {
            if (jsDom != document.activeElement) { // 如果dom没有获取到焦点，追加
                jsDom.innerHTML = jsDom.innerHTML + html;
                return;
            }
            var sel, range;
            if (window.getSelection) {
                // IE9 或 非IE浏览器
                debugger
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(),
                        node, lastNode;
                    while ((node = el.firstChild)) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                    // Preserve the selection
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            } else if (document.selection && document.selection.type != "Control") {
                // IE < 9
                document.selection.createRange().pasteHTML(html);
            }
        }
 
       document.getElementById('inserts').onclick = function() {
            var html = '<font style="color: green;">用户昵称</font>';
            insertAtCursor(document.getElementById('edit_hy_text_content_div'), html);
        };
    }
 
    </script>
</body>
</html>